<template>
  <div class="articleList" ref="listBox" @scroll="onScroll">
    <!-- 
          load对应的onLoad函数：专门用来加载数据的函数
          这个函数在两种情况下自动调用：
          1、数据没有铺满一平时会调用
          2、当向上啦需要加载出更多数据时调用

          finished用来标记数据是否全部加载完毕：
             当他为true时，就代表数据全部加载完了，所以不会再调用onLoad
             当它为false时，就代表没有加载完，onLoad会按照上面的原则自动调用

        v-model绑定loading是用来标记是否正在加载中
            为false，代表当前没有在加载，可以进行下次加载
            为true，代表当前正在加载，为了效率问题此时不会掉调用onLoad
            当它为false时，onLoad才能被调用，并且onLaod调用时会自动把loading改成true，因为onLoad被调用就代表要去加载数据了所以会自动把loading改成true，代表当前正在加载数据
       -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          @click="dotz(item.art_id)"
          v-for="(item, index) in list"
          :key="index"
        >
          <template>
            <div class="title">{{ item.title }}</div>
            <!-- 使用宫格放置图片 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item v-for="(v, i) in item.cover.images" :key="i">
                <van-image :src="v" />
              </van-grid-item>
            </van-grid>
            <!-- 放3个span -->
            <div class="otherInfo">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | getYear }}</span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入新闻数据接口
import { articleInfoAPI } from "@/api";

export default {
  // 可以在浏览器上查看当前页有的数据
  name: "articleList",
  props: ["channel_id"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: new Date(),
      isLoading: false,
      scTop: 0,
    };
  },
  // 当我离开home页面时组件会被缓存起来，我需要在我回到home页面时滚动条停留在我浏览的位置（当回到home页面会自动调用组件缓存的激活钩子）
  activated() {
    this.$refs.listBox.scrollTop = this.scTop;
  },
  methods: {
    // 监听list内容滚出去的高度
    onScroll() {
      // 获取到该盒子元素
      this.scTop = this.$refs.listBox.scrollTop;
    },
    async onLoad() {
      let res = await articleInfoAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp,
      });
      // 不能直接把数据赋给list，因为直接赋值会导致list永远铺不满，直接赋值对于list来说每次调用用onload就会覆盖原来数组的值
      // 所以要用push
      this.list.push(...res.data.data.results);
      // 把上一个时间段新闻的时间戳存到变量中，方便下次请求（因为如果把时间写死那么每次找的都是那10条最的数据）
      this.timestamp = res.data.data.pre_timestamp;
      // 一次加载完毕让loading状态变为false，方便onload函数进行下次加载
      this.loading = false;
      // 全部数据加载完毕
      // 当没有上一个时间段的新闻时间戳pre_timestamp会为null
      if (res.data.data.pre_timestamp == null) {
        this.finished = true;
      }
    },
    async onRefresh() {
      // 下拉时发送数据请求获取最新数据
      let res = await articleInfoAPI({
        channel_id: this.channel_id,
        timestamp: Date.now(),
      });
      // 把获取到的新数据直接赋值给list，不能最佳因为追加是在原有的数据基础上，叠加在数据的后面，而刷新就是为了拿到最新数据
      this.list = res.data.data.results;
      // 把加载状态改为false，表示加载完毕
      this.isLoading = false;
    },
    dotz(id) {
      this.$router.push({
        name: "details",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang='less' scoped>
.articleList {
  // 让内容有属于自己得滚动条
  position: fixed;
  top: 90px;
  bottom: 50px;
  width: 100vw;
  overflow: auto;
  .otherInfo {
    color: rgb(197, 196, 196);
    span {
      margin-right: 10px;
    }
  }
}
</style>